<template>
	<view class="cdb">
		<view class="cdb_container">
			<view class="cdb_img" v-for="(item,index) in 25" :key="index">
				<image v-if="index===2" src="@/static/borrowing/jiehuan_cdb02.png" mode="aspectFill"></image>
				<image v-else src="@/static/borrowing/jiehuan_cdb01.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>

	<view class="tips">
		<view class="tips_icon">
			<image src="@/static/borrowing/jiehuan_icon01.png" mode="aspectFill"></image>
			<!-- <image src="@/static/borrowing/jiehuan_icon02.png" mode=""></image> -->
			<!-- <image src="@/static/borrowing/jiehuan_icon03.png" mode=""></image> -->
		</view>
		<view class="tips_title">租借成功</view>
		<view class="tips_mail">请尽快从上方图示位置取走充电宝</view>
		<view class="but_style1">查看订单</view>
		<view class="but_style2">回到主页</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app"

	onReady(() => {
		uni.setNavigationBarTitle({
			title: '借取中'
		});
	})
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.cdb {
		width: 100%;
		height: 458rpx;
		background: center/100% 100% url(@/static/borrowing/jiehuan_bg01.png) no-repeat;
		display: flex;
		justify-content: center;

		.cdb_container {
			width: 450rpx;
			height: 210rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;
			margin-top: 40rpx;
		}

		.cdb_img {
			width: 20%;
			height: 20%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 70rpx;
				height: 14rpx;
			}
		}
	}

	.tips {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.tips_icon {
			width: 124rpx;
			height: 124rpx;
			margin-top: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.tips_title {
			font-size: 24px;
			font-weight: bold;
			letter-spacing: 2px;
			color: #000000;
			margin-top: 20rpx;
		}

		.tips_mail {
			font-size: 11px;
			letter-spacing: 2px;
			color: #8d8d8d;
			margin-top: 20rpx;
		}
		
		.but_style1 {
			width: 600rpx;
			height: 100rpx;
			background-image: linear-gradient(to bottom, #47b3ff, #3775f6);
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
			border-radius: 100rpx;
			margin-top: 60rpx;
			text-align: center;
			line-height: 100rpx;
			color: #ffffff;
			font-size: 20px;
		}
		
		.but_style2 {
			width: 600rpx;
			height: 100rpx;
			border-radius: 100rpx;
			border: 1px solid #aaaaaa;
			margin-top: 30rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 20px;
			color: #aaaaaa;
		}
	}
</style>